<template>
	<view class="dwu-modal">
		<u-popup :show="show" mode="center" bgColor="transparent">
			<view class="modal-popup">
				<image class="popup-bg" src="@/static/integral/popup_bg.png" mode=""></image>
				<view class="modal-box">
					<view class="modal-title">
						<image v-if="icon" class="modal-icon" src="@/static/modal/modal_icon.png" mode=""></image>
						<text :style="{textAlign: textAlign}">{{title}}</text>
					</view>
					<view class="modal-content" :style="{textAlign: textAlign}">
						{{content}}
					</view>
					<view class="modal-btns">
						<view class="modal-cancel" @click="close">
							{{cancalText}}
						</view>
						<view class="modal-submit" @click="submit">
							{{submitText}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "dwu-modal",
		data() {
			return {
				show: false,
				icon: true,
				textAlign: 'left',
				title: '提示',
				content: '',
				cancalText: '取消',
				submitText: '确认',
				type: '',
				success: null
			};
		},
		methods: {
			open(params) {
				console.log(params);
				this.title = params.title || '提示'
				this.content = params.content || ''
				this.icon = params.icon === false ? false : true
				this.textAlign = params.textAlign || 'left'
				this.cancalText = params.cancalText || '取消'
				this.submitText = params.submitText || '确认'
				this.type = params.type || ''
				this.show = true
				this.success = params.success || null
			},
			close() {
				this.show = false
				this.$emit('onCancal')
			},
			submit() {
				this.show = false
				this.success()
				this.$emit('onSubmit',this.type)
			}
		}
	}
</script>

<style lang="less">
	.dwu-modal {
		.modal-popup {
			position: relative;
			width: 573rpx;
			padding: 46rpx 38rpx 32rpx;

			.popup-bg {
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		.modal-box {
			position: relative;
			z-index: 10;

			.modal-title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 31rpx;
				color: #333333;
				line-height: 42rpx;
				display: flex;
				align-items: center;

				.modal-icon {
					margin-right: 16rpx;
					width: 34rpx;
					height: 34rpx;
				}

				text {
					display: block;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 31rpx;
					flex: 1;
				}
			}

			.modal-content {
				margin-top: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				line-height: 38rpx;
			}

			.modal-btns {
				margin-top: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.modal-cancel,
				.modal-submit {
					width: 200rpx;
					height: 70rpx;
					box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);
					border-radius: 40rpx;
					text-align: center;
					line-height: 70rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 27rpx;
				}

				.modal-cancel {
					margin-right: 33rpx;
					color: #666666;
					border: 1px solid #E6E6E6;
				}

				.modal-submit {
					color: #B0DD67;
					background: #3D3D3D;
				}
			}
		}
	}
</style>